<template>
  <div class="container">
    <div class="row">
      <el-card class="col">
        <el-form
          ref="form"
          :rules="rules"
          :model="model"
          status-icon
          label-width="120px"
        >
          <el-form-item :label="$language.local('user_name')">
            <span v-if="user" class="ml-1">{{ user.username }}</span>
          </el-form-item>
          <el-form-item prop="oldpwd" :label="$language.local('oldpwd')">
            <xy-input
              :disabled="musteditpwd === '1'"
              type="password"
              v-model="model.oldpwd"
            ></xy-input>
          </el-form-item>
          <el-form-item prop="newpwd" :label="$language.local('newpwd')">
            <xy-input type="password" v-model="model.newpwd"></xy-input>
          </el-form-item>
          <el-form-item
            prop="confirmPassword"
            :label="$language.local('confirmPassword')"
          >
            <xy-input
              type="password"
              v-model="model.confirmPassword"
            ></xy-input>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="invoice-instructions col ml-2" shadow="">
        <div class="title">
          <h3><i class="el-icon-info"></i> 温馨提示：</h3>
        </div>

        <p class="text item">
          1. 为了您的账号和隐私安全，首次登录系统请修改默认密码。
        </p>
        <p class="text item">2. 如忘记旧密码请与平台客服人员联系。</p>

        <!-- <p class="text item red">如有疑问请联系平台客服人员。</p> -->
      </el-card>
    </div>

    <div class="form-footer">
      <el-button
        size="small"
        type="primary"
        icon="el-icon-check"
        class="mt-2"
        @click="onSubmit('form')"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const validatePassword = (rule, value, callback) => {
      if (/^[a-zA-Z_0-9]{0,}$/.test(value)) {
        callback();
      } else {
        callback(new Error("请输入英文字母、下划线、数字。"));
      }
    };
    const validateNewPassword = (rule, value, callback) => {
      if (value === this.model.oldpwd) {
        callback(new Error("与旧密码不能相同！"));
      } else if (!/^[a-zA-Z_0-9]{0,}$/.test(value)) {
        callback(new Error("请输入英文字母、下划线、数字。"));
      } else {
        callback();
      }
    };
    const validateConfirmPassword = (rule, value, callback) => {
      if (value === this.model.newpwd) {
        callback();
      } else {
        callback(new Error("两次输入的密码不一致。"));
      }
    };
    return {
      model: {
        // PayMaxAmount: 93500,
        // MonthAcceptanceMaxAmount: 2000000,
        // YearAcceptanceMaxAmount: 5000000,
        oldpwd: "888888",
        newpwd: "",
        confirmPassword: "",
      },
      user: this.$store.getters.user,
      musteditpwd: window.sessionStorage.getItem("musteditpwd"),
      api: "/api/manager/EditPWD/{id}",
      rules: {
        oldpwd: [
          { required: true, message: "不能为空", trigger: "blur" },
          { min: 6, message: "长度在 不小于 6 个字符", trigger: "blur" },
          { max: 15, message: "长度在 不大于 15 个字符", trigger: "blur" },
          { validator: validatePassword, trigger: "blur" },
        ],
        newpwd: [
          { required: true, message: "不能为空", trigger: "blur" },
          { min: 6, message: "长度在 不小于 6 个字符", trigger: "blur" },
          { max: 15, message: "长度在 不大于 15 个字符", trigger: "blur" },
          { validator: validateNewPassword, trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "不能为空", trigger: "blur" },
          { min: 6, message: "长度在 不小于 6 个字符", trigger: "blur" },
          { max: 15, message: "长度在 不大于 15 个字符", trigger: "blur" },
          { validator: validatePassword, trigger: "blur" },
          { validator: validateConfirmPassword, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    console.log(this.user);
  },
  methods: {
    async getData() {
      let response = await this.$http.get(
        `/api/manager/EditPWD/${this.user.userId}`
      );
      console.log(response);
      this.model = response.data.Data;
    },
    async onSubmit(formName) {
      let valided = await this.$refs[formName].validate().catch((err) => err);

      if (!valided) {
        return;
      }

      let response = await this.$http.post(
        `/api/manager/EditPWD/${this.user.userId}`,
        null,
        this.model
      );
      console.log(response);
      this.$router.replace("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .row {
    width: 100%;
    padding: 0 1rem;
  }
}
</style>
